<template>
  <view class="hs-tab-components">
    <view class="left-content">
      <view class="lun-bo">
        <swiper
          class="swiper"
          circular
          :autoplay="true"
          :interval="5000"
          :duration="300"
        >
          <swiper-item v-for="(item, index) in tabList" :key="index">
            <image class="swiper-img" :src="item.imageUrl" mode="widthFix" />
          </swiper-item>
        </swiper>
      </view>
      <view class="lun-bo1"></view>
      <view class="lun-bo2"></view>
    </view>
    <view class="search-text-list">
      <swiper
        class="swiper"
        circular
        :vertical="true"
        :autoplay="true"
        :interval="5000"
        :duration="300"
      >
        <swiper-item v-for="(item, index) in tabList" :key="index">
          <view class="swiper-item">
            <view class="left-text">
              <text class="tips" v-if="item.tips">{{ item.tips }}</text>
              <text class="title">{{ item.title }}</text>
            </view>
            <view class="right-text" v-if="item.guidance">
              <text class="guidance">{{ item.guidance }}</text>
              <text class="iconfont icon-weibiaoti--10"></text>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="right-content">
      <text class="tips-text">去抢购</text>
      <view class="iconfont icon-weibiaoti--10"></view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {
    tabList: {
      type: Array,
      default: () => [
        {
          tips: "",
          title: "您加购的3件商品活动进行中",
          guidance: "",
          imageUrl: "/static/components/tab/women/T恤.jpg",
        },
        {
          tips: "",
          title: "您加购的 薄外套 商品活动进行中",
          guidance: "",
          imageUrl: "/static/components/tab/women/薄外套.jpg",
        },
        {
          tips: "",
          title: "您加购的 跑步鞋 活动进行中",
          guidance: "",
          imageUrl: "/static/components/tab/movement/跑步鞋.jpg",
        },
      ],
    },
  },
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.hs-tab-components {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6rpx 20rpx;
  box-sizing: border-box;
  background: #f7f7f7;
  border-radius: 10rpx;
  .left-content {
    position: relative;
    width: 60rpx;
    height: 60rpx;
    .lun-bo {
      width: 100%;
      height: 100%;
      border-radius: 6rpx;
      background: #f2f2f2;
      position: absolute;
      z-index: 2;
      overflow: hidden;
      .swiper-img {
        width: 100%;
        height: 100%;
      }
    }
    .lun-bo1 {
      width: 90%;
      height: 90%;
      border-radius: 6rpx;
      background: #d0d0d0;
      position: absolute;
      right: -10rpx;
      z-index: 1;
      top: 50%;
      transform: translateY(-50%);
    }
    .lun-bo2 {
      width: 80%;
      height: 80%;
      border-radius: 6rpx;
      background: #e5e5e5;
      position: absolute;
      right: -15rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .search-text-list {
    height: 70rpx;
    flex: 1;
    line-height: 70rpx;
    box-sizing: border-box;
    color: #000;
    margin-left: 20rpx;
    border-radius: 10rpx;
    // background: #fff;
    overflow: hidden;
    .swiper {
      height: 100%;
      .t-icon-guanjun {
        width: 40rpx;
        height: 40rpx;
      }
      .red-text {
        color: #fff;
        height: 22rpx;
        line-height: 22rpx;
        background: red;
        padding: 0 8rpx;
        border-radius: 14rpx 14rpx 14rpx 0;
        font-size: 22rpx;
        margin-left: 10rpx;
        font-weight: 700;
      }
      .swiper-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 300;
        padding: 0 20rpx;
        .left-text {
          display: flex;
          align-items: center;
          .tips {
            color: #000;
            // 文字倾斜
            transform: skewX(-20deg);
            font-weight: 700;
            margin-right: 15rpx;
            font-size: 26rpx;
            // background: linear-gradient(
            //   to right,
            //   #ff4646,
            //   #ff7b00,
            //   #06a800,
            //   #001aff,
            //   #ff00f2
            // );
            // background-clip: text;
            // -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
          }
          .title {
            font-size: 24rpx;
            color: #333;
          }
        }
        .right-text {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          color: #666;
          .guidance {
            font-size: 24rpx;
            margin-right: 5rpx;
          }
          .icon-weibiaoti--10 {
            display: block;
            font-size: 20rpx;
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  .right-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    .tips-text {
      color: #ff0777;
      font-size: 26rpx;
    }
    .icon-weibiaoti--10 {
      display: inline-block;
      margin-top: 4rpx;
      margin-left: 6rpx;
      border-radius: 50%;
      font-size: 16rpx;
      padding: 3rpx;
      color: #fff;
      background: #ff0777;
      transform: rotate(180deg);
    }
  }
}
</style>
